
{include file="public/layout" /}
<body>
<!--
本「综合演示」包含：自定义头部工具栏、获取表格数据、表格重载、自定义模板、单双行显示、单元格编辑、自定义底部分页栏、表格相关事件与操作、与其他组件的结合等相对常用的功能，以便快速掌握 table 组件的使用。
-->

<div style="padding: 16px;">
	<blockquote class="layui-elem-quote">一级菜单最多三个，二级菜单最多五个</blockquote>

	<table class="layui-hide" id="tree_tabledata" lay-filter="tree_tabledata"></table>
	<!--    <script type="text/html" id="test-pagebar">-->
	<!--        <div class="layui-btn-container">-->
	<!--            <button class="layui-btn layui-btn-sm" lay-event="footerDemoBtn1">底部按钮1</button>-->
	<!--            <button class="layui-btn layui-btn-sm" lay-event="footerDemoBtn2">底部按钮2</button>-->
	<!--        </div>-->
	<!--    </script>-->
</div>
<script type="text/html" id="TPL-treeTable-demo">
	<div class="layui-btn-container">
		<button class="layui-btn layui-btn-sm" onclick="createmenu()">
			生成微信菜单
		</button>
	</div>
</script>
<script type="text/html" id="TPL-treeTable-demo-tools">
	<div class="layui-btn-container">
		<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
		<a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="addChild">新增</a>
		<a class="layui-btn layui-btn-xs" lay-event="more">更多 <i class="layui-icon layui-icon-down"></i></a>
	</div>
</script>
<script type="text/html" id="barDemo">
	<div class="layui-clear-space">
		<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
		<!--        <a class="layui-btn layui-btn-xs" lay-event="recharge">充值</a>-->
		<a class="layui-btn layui-btn-xs" lay-event="more">
			更多
			<i class="layui-icon layui-icon-down"></i>
		</a>
	</div>
</script>
<script>
	var tableIns
	var datawhere = {};
	layui.use(function(){
		var treeTable = layui.treeTable;
		var layer = layui.layer;
		var dropdown = layui.dropdown;
		// 渲染
		tableIns = treeTable.render({
			elem: '#tree_tabledata',
			url: '{:url("menu")}', // 此处为静态模拟数据，实际使用时需换成真实接口
			tree: {
                // 异步加载子节点
                // async: {
                //   enable: true,
                //   url: '{:url("menu")}', // 此处为静态模拟数据，实际使用时需换成真实接口
                //   autoParam: ["pid=id"]
                // },
			},
			maxHeight: '501px',
			toolbar: '#TPL-treeTable-demo',
			cols: [[
				{type: 'checkbox', fixed: 'left'},
				{field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left'},
				{field: 'name', title: '用户名', width: 180, fixed: 'left'},
				{field: 'sex', title: '性别', width: 80, sort: true},
				{field: 'experience', title: '积分', width: 90, sort: true},
				{field: 'city', title: '城市', width: 100},
				{ fixed: "right", title: "操作", width: 190, align: "center", templet:function (d) {
					var html = '';
					html += '<a class="layui-btn layui-btn-xs" onclick="edit('+d.id+')">编辑</a>';
					if(d.level==1){
						html += '<a class="layui-btn layui-btn-xs" onclick="add('+d.id+')">新增下级</a>';
					}
					return html;
				}}
			]],
			page: true
		});
		// 表头工具栏工具事件
		treeTable.on("toolbar(tree_tabledata)", function (obj) {
			var config = obj.config;
			var tableId = config.id;
			var status = treeTable.checkStatus(tableId);
			// 获取选中行
			if (obj.event === "getChecked") {
				if(!status.data.length) return layer.msg('无选中数据');
				console.log(status);
				layer.alert("当前数据选中已经输出到控制台，<br>您可按 F12 从控制台中查看结果。");
			}
		});
	});
	function edit(id){
		layer.open({
			title: '添加',
			type: 2,
			shadeClose: true,
			area: ['100%','100%'],
			scrollbar:false,
			content: '{:url("edit_menu")}/id/'+id
		});
	}
	function add(id){
		layer.open({
			title: '添加',
			type: 2,
			shadeClose: true,
			area: ['100%','100%'],
			scrollbar:false,
			content: '{:url("edit_menu")}/pid/'+id
		});
	}
	function reload(){
		layui.table.reload('test', {
			where: {
				abc: 123,
				test: '新的 test1'
			},
			// scrollPos: 'fixed',  // 保持滚动条位置不变 - v2.7.3 新增
			// height: 2000, // 测试无效参数（即与数据无关的参数设置无效，此处以 height 设置无效为例）
			//url: '404',
			//page: {curr: 1, limit: 30} // 重新指向分页
		}, true);
	}
	function del(id){
		if(id){
			var ids = [id];
		}else{
			var checkStatus = layui.table.checkStatus('test');
			var data = checkStatus.data;
			var ids = [];
			$.each(data, function(index, value){
				//goods_ids.append(value.goods_id);
				ids.push(value.user_id);
			});
		}
		layer.confirm('确定要删除选择的会员'+ids+'吗？', function(index){
			$.ajax({
				type: "POST",
				url: "{:url('delUser')}",
				data: {ids:ids},
				success: function(res){
					console.log(res);
					if(res.status){
						layer.msg('提交成功');
					}else{
						layer.msg(res.msg);
					}
					layer.close(index);
					tableIns.reload()
				}
			});
			layer.close(index);
			// 向服务端发送删除指令
		});

	}
	function createmenu(){
		layer.confirm('确定要现在生成微信菜单吗？', function(index){
			$.ajax({
				type: "POST",
				url: "{:url('pub_menu')}",
				data: {},
				success: function(res){
					console.log(res);
					if(res.status){
						layer.msg('提交成功');
					}else{
						layer.msg(res.msg);
					}
					layer.close(index);
					tableIns.reload()
				}
			});
			layer.close(index);
			// 向服务端发送删除指令
		});
	}
</script>
</body>
</html>